<template>
  <div>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageSize"
      :page-sizes="[10, 20, 50, 100]" :page-size="pageNum" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>
<script>
export default {
  props: {
    pageSize: {
      type: [String, Number],
      default: 1
    },
    pageNum: {
      type: [String, Number],
      default: 10
    },
    total: {
      type: [String, Number],
      default: 120
    }
  },
  data() {
    return {
    }
  },
  mounted() { },
  methods: {
    handleSizeChange(val) {
      const params = {
        pageNum: val
      }
      this.$emit('getPage', params)
    },
    handleCurrentChange(val) {
      const params = {
        pageSize: val
      }
      this.$emit('getPage', params)
    },
  }
}
</script>

<style lang="scss" scoped>
.el-pagination {
  justify-content: end;
  display: flex;
}
</style>